<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>过滤器</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h5>{{time}}</h5>
			<h5>{{time | format('yyyy-MM-dd')}}</h5>
			<h5>{{time | format('yyyy-MM-dd hh:mm:ss')}}</h5>
			<hr>
			<input type="text" v-model="info">
			<h5>{{info}}</h5>
			<h5>{{info | capitalize}}</h5>
			<h5>{{info | capitalize| lower}}</h5>
			<h5>{{info}}</h5>
			<hr>
			<h5>{{info | upper}}</h5>
			<hr>
			<h5>{{info | filterA('data1','data2')}}</h5>
			<hr>
			 
		</div>
		<script>
			Vue.filter('format',function(value,pattern){
				function dateFormat(date, format) {
				    if (typeof date === "string") {
				        var mts = date.match(/(\/Date\((\d+)\)\/)/);
				        if (mts && mts.length >= 3) {
				            date = parseInt(mts[2]);
				        }
				    }
				    date = new Date(date);
				    if (!date || date.toUTCString() == "Invalid Date") {
				        return "";
				    }
				    var map = {
				        "M": date.getMonth() + 1, //月份 
				        "d": date.getDate(), //日 
				        "h": date.getHours(), //小时 
				        "m": date.getMinutes(), //分 
				        "s": date.getSeconds(), //秒 
				        "q": Math.floor((date.getMonth() + 3) / 3), //季度 
				        "S": date.getMilliseconds() //毫秒 
				    };
				
				    format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
				        var v = map[t];
				        if (v !== undefined) {
				            if (all.length > 1) {
				                v = '0' + v;
				                v = v.substr(v.length - 2);
				            }
				            return v;
				        } else if (t === 'y') {
				            return (date.getFullYear() + '').substr(4 - all.length);
				        }
				        return all;
				    });
				    return format;
				}
				return  dateFormat(value,pattern);
			});
			
			
			/**
			 * @param {Object} value 对应管道符号前面的数据.
			 * @param {Object} arg1 对应过滤器中传入的第一个参数 (data1)
			 * @param {Object} arg2 对应过滤器中传入的第二个参数 (data2)
			 */
			Vue.filter('filterA', function(value, arg1, arg2) {
				if (value.length < 6) {
					return value + arg1;
				} else {
					return value + arg2;
				}
			});

			//全局过滤器:将字符串首字母实现大写
			Vue.filter('capitalize', function(value) {
				return value.charAt(0).toUpperCase() + value.slice(1).toLocaleLowerCase();
			});

			//全局过滤器:将字符串全部转成小写
			Vue.filter('lower', function(value) {
				return value.toLowerCase();
			});

			//1. 实例化一个Vue的实例
			let vm = new Vue({
				el: '#app',
				data: {
					info: '',
					time:new Date()
				},
				filters: {
					upper(value) {
						return value.toUpperCase();
					}
				}
			});
		</script>
	</body>
</html>
